<template>
  <div>
  <el-dialog
    :close-on-click-modal="false"
    :visible.sync="visible"

    >
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>详细信息</span>
      </div>
      <div class="text item" style="height:600px;overflow-y: auto;overflow-x:visible;">
        <el-collapse v-model="activeName" accordion style="width: 94%;margin:0 auto;">
          <el-collapse-item title="基本信息" name="1">
            <el-form :model="dataForm"  ref="dataForm" label-width="100px">
            <el-row>
              <el-col :span="12">
            <el-form-item label="人像" style="height:125px;">
              <img v-if="imageUrl" :src="imageUrl" class="avatar" style="width:120px;height:120px;margin-bottom: 10px;">
          </el-form-item>
            </el-col>
                <el-col :span="12">

                </el-col>
            </el-row>
          <el-row>
              <el-col :span="12">
                <el-form-item :label="$t('form.name')" >
                  <el-input v-model="dataForm.name" :disabled="isInput" ></el-input>
                </el-form-item>
              </el-col>
                <el-col :span="12">
              <el-form-item label="身份证" >
                  <!-- @blur="inputBlur()" -->
                <el-input v-model="dataForm.identityNumber" :disabled="isInput" ></el-input>
              </el-form-item>
              </el-col>
          </el-row>
            <el-row>
              <el-col :span="12">
            <el-form-item label="证件种类" >
              <el-select v-model="dataForm.identificationType" filterable :disabled="isInput"   style="width:100%">
              <el-option
                v-for="item in zjlxOptions"
                :key="item.id"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            </el-form-item>
            </el-col>
                <el-col :span="12">
            <el-form-item label="证件号" >
              <el-input v-model="dataForm.identificationNumber" :disabled="isInput"  ></el-input>
            </el-form-item>
            </el-col>
          </el-row>
          <el-row>
                <el-col :span="12">
            <el-form-item label="曾用名">
              <el-input v-model="dataForm.usedName" :disabled="isInput" ></el-input>
            </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="类别" >
                    <el-select v-model="dataForm.managementCategory" :disabled="isInput" filterable  style="width:100%">
                      <el-option
                        v-for="item in rklbOptions"
                        :key="item.id"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                    </el-form-item>
            </el-col>
          </el-row>
            <el-row>
              <el-col :span="12">
            <el-form-item label="外文姓" >
              <el-input v-model="dataForm.foreignSurname" :disabled="isInput"></el-input>
            </el-form-item>
            </el-col>
                <el-col :span="12">
            <el-form-item label="外文名" >
              <el-input v-model="dataForm.foreignName" :disabled="isInput" ></el-input>
            </el-form-item>
            </el-col>
          </el-row>
            <el-row>
              <el-col :span="12">
            <el-form-item :label="$t('form.sex')">
              <el-select v-model="dataForm.sex" :disabled="true"   style="width:100%">
              <el-option
                v-for="item in sexOptions"
                :key="item.id"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            </el-form-item>
            </el-col>
                <el-col :span="12">
            <el-form-item label="民族" >
              <el-select v-model="dataForm.nation" :disabled="isInput" filterable  style="width:100%">
              <el-option
                v-for="item in nationOptions"
                :key="item.id"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            </el-form-item>
            </el-col>
          </el-row>
            <el-row>
              <el-col :span="12">
            <el-form-item :label="$t('form.birthDate')" >
              <el-input v-model="dataForm.birthdate" :disabled="true" ></el-input>
            </el-form-item>
            </el-col>
                <el-col :span="12">
            <el-form-item label="注销类别" >
              <el-select v-model="dataForm.logoutCategory" filterable :disabled="isInput"  style="width:100%">
              <el-option
                v-for="item in rkzxlbOptions"
                :key="item.id"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            </el-form-item>
                </el-col>
            </el-row>
              </el-form>
          </el-collapse-item>
          <el-collapse-item title="单位信息" name="2" v-show="false">

            <el-form :model="dataForm" ref="dataForm"  label-width="100px">
              <el-form-item label="单位名称" >
              <el-input :disabled="true" v-model="dataForm.unitEntity.name" ></el-input>
            </el-form-item>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="单位属性" >
                      <el-select v-model="dataForm.unitEntity.institutions" :disabled="isInput"  style="width:100%">
                        <el-option
                          v-for="item in dwsxOptions"
                          :key="item.id"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="单位类别">
              <el-select v-model="dataForm.unitEntity.businessCategory" :disabled="isInput"  style="width:100%">
                <el-option
                  v-for="item in qylbOptions"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="营业执照号" >
              <el-input :disabled="true" v-model="dataForm.unitEntity.businessLicense"></el-input>
            </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="注册类型" >
                    <el-select v-model="dataForm.unitEntity.typeBusiness" :disabled="isInput" style="width:100%">
                    <el-option
                      v-for="item in qyczlxOptions"
                      :key="item.id"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
            <el-form-item label="控股情况">
              <el-select v-model="dataForm.unitEntity.holdings" :disabled="isInput" style="width:100%">
                <el-option
                  v-for="item in kgqkOptions"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="经营范围">
              <el-select v-model="dataForm.unitEntity.businessScope" :disabled="isInput" style="width:100%">
                <el-option
                  v-for="item in jyfwOptions"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
        <el-form-item label="是否有监控">
              <el-select v-model="dataForm.unitEntity.monitoring" :disabled="isInput"  style="width:100%">
              <el-option
                v-for="item in monitoringOptions"
                :key="item.id"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            </el-form-item>
                </el-col>
                <el-col :span="12">

                </el-col>
              </el-row>
             <el-form-item label="单位地址">
              <el-input :disabled="true" v-model="dataForm.unitEntity.addressName" ></el-input>
            </el-form-item>
            </el-form>

          </el-collapse-item>
          <el-collapse-item title="房屋信息" name="3">
           <el-table
            :data="dataForm.house_populationList">
            <el-table-column
              prop="addressName"
              label="房间地址"
              width="700px">
            </el-table-column>
            <el-table-column
              prop="dictLabel"
              label="关系"
              >
            </el-table-column>
          </el-table>
          </el-collapse-item>
        </el-collapse>
      </div>
    </el-card>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">{{ $t('handle.cancel') }}</el-button>
    </span>
  </el-dialog>
  </div>
</template>

<script>
import { getDictList, getUnitMessage, getPhotoUrl, existIdCard } from "@/utils";
import { imgUrlHost } from '@/config/env'
  export default {
    data () {
      return {
        isInput:true,
         activeName: '1',
        visible: false,
        imgUrlHost:imgUrlHost,
        dataForm: {
        key: '',
        idCard: '',
        // 人口信息
        populationCoding: 0,
        managementCategory: '',
        identityNumber: '',
        name: '',
        usedName: '',
        identificationType: '',
        identificationNumber: '',
        foreignSurname: '',
        foreignName: '',
        sex: '',
        nation: '',
        birthdate: '',
        logoutCategory: '',
        unitId: '',
        unitIdText: '',
        addressId: '',
        portraitId: '',
        // 单位信息
        unitEntity: {
          name: '',
          institutions: '',
          businessCategory: '',
          typeBusiness: '',
          holdings: '',
          businessScope: '',
          monitoring: '',
          businessLicense: '',
          addressName:''
        },
        house_populationList: []
      },
      imageUrl:'',
      nationOptions: [],
      sexOptions: [],
      zjlxOptions: [],
      options: [],
      rklbOptions: [],
      addOrUpdateVisible: false,
      rkzxlbOptions: [],
      dwsxOptions: [], // 单位属性数据
      qylbOptions: [], // 单位类别数据
      qyczlxOptions: [], // 单位注册类型数据
      kgqkOptions: [], // 控股情况数据
      jyfwOptions: [], // 经营范围数据
      monitoringOptions: [] // 是否有监控数据
      }
    },
    methods: {
      restValue () {
        this.dataForm.unitEntity.name = ''
        this.dataForm.unitEntity.institutions = ''
        this.dataForm.unitEntity.businessCategory = ''
        this.dataForm.unitEntity.typeBusiness = ''
        this.dataForm.unitEntity.holdings = ''
        this.dataForm.unitEntity.businessScope = ''
        this.dataForm.unitEntity.monitoring = ''
        this.dataForm.unitEntity.businessLicense = ''
        this.dataForm.unitEntity.addressName = ''
      },
      init (id) {
        // this.$refs['dataForm'].resetFields()
        this.restValue()
        this.activeName = '1'
        this.getSelectData()
        this.visible = true
        this.$http({
          url: `/dg-standard-info/dgactualpopulation/info/${id}`,
          method: "get",
          params: this.$http.adornParams()
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.dataForm.unitIdText = "";
            this.dataForm.managementCategory =
              data.dgActualPopulation.managementCategory;
            this.dataForm.identityNumber =
              data.dgActualPopulation.identityNumber;
            this.dataForm.name = data.dgActualPopulation.name;
            this.dataForm.usedName = data.dgActualPopulation.usedName;
            this.dataForm.identificationType =
              data.dgActualPopulation.identificationType;
            this.dataForm.identificationNumber =
              data.dgActualPopulation.identificationNumber;
            this.dataForm.foreignSurname =
              data.dgActualPopulation.foreignSurname;
            this.dataForm.foreignName = data.dgActualPopulation.foreignName;
            this.dataForm.sex = data.dgActualPopulation.sex;
            this.dataForm.nation = data.dgActualPopulation.nation;
            this.dataForm.birthdate = data.dgActualPopulation.birthdate;
            this.dataForm.logoutCategory =
              data.dgActualPopulation.logoutCategory;
            if (data.dgActualPopulation.unitEntity !== null) {
              this.getUnitMessage(data.dgActualPopulation.unitEntity.unitCode)
            }
            // this.dataForm.unitEntity = data.dgActualPopulation.unitEntity
            if (data.dgActualPopulation.portraitEntity !== null) {
              this.dataForm.portraitId =
                data.dgActualPopulation.portraitEntity.id;
            }
            this.imageUrl = this.getPhoto(data.dgActualPopulation.portraitEntity)
            this.dataForm.house_populationList = data.dgActualPopulation.houseAdreessVo
          }
        });
      },
      getPhoto(data) {
        let photo = "";
        if (data === null) {
          photo = "../../../static/img/photo.png";
        } else {
          if (data.photoUrl !== null) {
            photo = this.imgUrlHost + data.photoUrl;
          } else if (data.photoBase64 !== null) {
            photo = "data:image/png;base64," + data.photoBase64;
          } else {
            photo = "../../../static/img/photo.png";
          }
        }
        return photo;
      },

      getUnitMessage (id) {
        this.$http({
          // url: this.$http.adornUrl(`/dgactualunit/info/${this.dataForm.unitCode}`),
          url: `/dg-standard-info/dgactualunit/info/${id}`,
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataForm.unitEntity.name = data.dgActualUnit.name
            this.dataForm.unitEntity.institutions =data.dgActualUnit.institutions
            this.dataForm.unitEntity.businessCategory = data.dgActualUnit.businessCategory
            this.dataForm.unitEntity.typeBusiness = data.dgActualUnit.typeBusiness
            this.dataForm.unitEntity.holdings = data.dgActualUnit.holdings
            this.dataForm.unitEntity.businessScope = data.dgActualUnit.businessScope
            this.dataForm.unitEntity.monitoring = data.dgActualUnit.monitoring
            this.dataForm.unitEntity.businessLicense = data.dgActualUnit.businessLicense
            this.dataForm.unitEntity.addressName = data.dgActualUnit.addressVo.addressName
          }
        })
      },
      getSelectData() {
        getDictList("nation").then(({ data }) => {
          this.nationOptions = data.dictList;
        });
        getDictList("sex").then(({ data }) => {
          this.sexOptions = data.dictList;
        });
        getDictList("type_document").then(({ data }) => {
          this.zjlxOptions = data.dictList;
        });
        getDictList("population_type").then(({ data }) => {
          this.rklbOptions = data.dictList;
        });
        getDictList("population_cancellation_type").then(({ data }) => {
          this.rkzxlbOptions = data.dictList;
        });
        getDictList('business_category').then(({data}) => {
          this.qylbOptions = data.dictList
        })
        getDictList('institutions').then(({data}) => {
          this.dwsxOptions = data.dictList
        })
        getDictList('type_business').then(({data}) => {
          this.qyczlxOptions = data.dictList
        })
        getDictList('holdings').then(({data}) => {
          this.kgqkOptions = data.dictList
        })
        getDictList('business_scope').then(({data}) => {
          this.jyfwOptions = data.dictList
        })
        getDictList('monitoring').then(({data}) => {
          this.monitoringOptions = data.dictList
        })
    },
    }
  }
</script>
<style>
.el-collapse-item__header {
    height: 70px;
    line-height: 70px;
    font-size: 15px;
}
.el-collapse-item__arrow {
    line-height: 70px;
    font-weight: 500;
}
.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}
.clearfix:after {
    clear: both
}

.box-card {
    width: 98%;

}
/* 折叠面板打开时出现的样式 */
.el-collapse-item__header.is-active {
    color:#45c2b5;

}
.custom-3E8EF7 .el-input.is-disabled .el-input__inner {
    color: black;
}
</style>
